(function(window) {
    const WIDTH = 1; //基础宽度   一个格子的边长
    class Render {
        constructor(x, y, bgColor) { //渲染类的构造函数、一个渲染对象需要左侧偏移、高度偏移、背景颜色
            this.x = x || 0;
            this.y = y || 0;
            this.bgColor = bgColor || '#ccc';
            this.father = null //记录该对象被渲染到哪个father上
            this.rendered = null; //记录该对象是否渲染到页面中了
        }
        render = function(father, offsetX, offsetY) { //将对象渲染到father对象上的方法
            father = father || document.body; //如果没有给定father就指定为body
            offsetX = offsetX || 0;
            offsetY = offsetY || 0; //如果没有指定在父元素上的基础偏移量就默认为0
            if (!father.style.position) father.style.position = 'relative'; //如果father没有定位属性，就给一个相对定位
            this.father = father; //将对象的渲染father改为father
            let newDiv = document.createElement('div');
            newDiv.style.position = 'absolute';
            newDiv.style.left = `${(offsetX + this.x) * WIDTH}rem`;
            newDiv.style.top = `${(offsetY + this.y) * WIDTH}rem`;
            newDiv.style.width = `${WIDTH}rem`;
            newDiv.style.height = `${WIDTH}rem`;
            newDiv.style.background = this.bgColor;
            newDiv.style.border = '0.01rem solid #aaa';
            this.rendered = newDiv;
            father.appendChild(newDiv);
            return newDiv; //渲染成功返回渲染的dom对象
        }
        remove = function() { //移除该对象的渲染
            if (this.rendered) {
                this.father.removeChild(this.rendered);
                this.rendered = null;
            }
        }
    }
    window.Render = Render;
}(window))